<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="诺账通业务分类">
        <template #title>
          <TitleName
            title="诺账通业务分类"
            icon="i-carbon-bookmark-filled"
            :titleStyle="{ color: '#000' }"
          ></TitleName>
        </template>
        <div>
          <IndustryTable />
        </div>
      </el-collapse-item>
      <el-collapse-item name="地市统计分析">
        <template #title>
          <TitleName
            title="地市统计分析"
            icon="i-carbon-bookmark-filled"
            :titleStyle="{ color: '#000' }"
          ></TitleName>
        </template>
        <div>
          <LevelTable />
        </div>
      </el-collapse-item>
      <el-collapse-item name="新增人数">
        <template #title>
          <TitleName
            title="新增人数"
            icon="i-carbon-bookmark-filled"
            :titleStyle="{ color: '#000' }"
          />
        </template>
        <div>
          <!--  v-if="activeNames.includes('新增人数')" -->
          <Additional />
        </div>
      </el-collapse-item>
      <el-collapse-item name="人员销售排行榜">
        <template #title>
          <TitleName
            title="人员销售排行榜"
            icon="i-carbon-bookmark-filled"
            :titleStyle="{ color: '#000' }"
          ></TitleName>
        </template>
        <div>
          <ExpireTable />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup name="TaxationStatistics">
import Additional from './modules/additional'
import ExpireTable from './modules/expireTable'
import IndustryTable from './modules/industryTable'
import LevelTable from './modules/levelTable'
const components = shallowRef({
  Additional,
  ExpireTable,
  IndustryTable,
  LevelTable
})
const activeNames = reactive([
  '诺账通业务分类',
  '新增人数',
  '地市统计分析',
  '人员销售排行榜'
])
</script>
<style lang="scss" scoped>
.el-radio-group.groupBtn :deep(.el-radio__input) {
  display: none;
}
</style>
